<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <label for="t1">邮箱</label><input type="text" id="t1"><span class="s1"></span><br>
    <label for="t2">0~255</label><input type="text" id="t2"><span class="s2"></span><br>
    <label for="t3">用户名</label><input type="text" id="t3"><span class="s3"></span><br>
    <label for="t4">手机号</label><input type="text" id="t4"><span class="s4"></span><br>
    <label for="t5">密码</label><input type="text" id="t5"><span class="s5"></span><br>
    <button class="yan">验证</button>

    <script>
        window.onload = () => {
            let t1 = document.querySelector("#t1");
            // console.log(t1)
            let t2 = document.querySelector("#t2");
            let t3 = document.querySelector("#t3");
            let yan = document.querySelector(".yan");
            let spa = document.querySelectorAll("span");
            yan.onclick = () => {
                // 邮箱以这些结束.com|.cn|.sina|.net

                let reg1 = /^[0-9a-zA-Z]{6,12}@[0-9a-zA-Z]{2,4}\.(com|cn|sina|net)$/;
                // console.log(reg1.test(t1.value))
                if (reg1.test(t1.value) && t1.value != "") {
                    // console.log(true)
                    spa[0].innerHTML = "true"
                } else {
                    spa[0].innerHTML = "false"
                }
                // 验证0-255之间的数字
                let reg2 = /^(\d|\d{0,2}|1\d{0,2}|2[0-4]{1}\d|25[0-5])$/;
                if (reg2.test(t2.value) && t2.value != "") {
                    // console.log(true)
                    spa[1].innerHTML = "true"
                } else {
                    spa[1].innerHTML = "false"
                }
                // 用户名：14个字母
                // let reg3 = /^([a-zA-Z]{0,14}|[\u4e00-\u9fa5]{0,7})$/
                let rega = /[a-zA-Z]/
                let regb = /[\u4e00-\u9fa5]/
                let a = t3.value;
                a = a.split("")
                let num = 0

                a.forEach((item, index) => {

                    if (rega.test(item)) {
                        num = num + 1
                    } else if (regb.test(item)) {
                        num = num + 2
                    }
                })
                if (num < 15 && t3.value != "") {
                    console.log(num)
                    spa[2].innerHTML = "true"
                }
                else {
                    spa[2].innerHTML = "false"
                }

                // 手机号：11位数字
                let reg4 = /^1[3(5-9)]\d{9}$/
                if (reg4.test(t4.value) && t4.value != "") {
                    // console.log(true)
                    spa[3].innerHTML = "true"
                } else {
                    spa[3].innerHTML = "false"
                }
                // 密码：
                //                 +   8-14个字符
                // +   数字 字母 标点标点符号 组成
                let reg5 = /^[0-9a-zA-Z,\.\?!]{8,14}$/
                if (reg5.test(t5.value) && t5.value != "") {
                    // console.log(true)
                    spa[4].innerHTML = "true"
                } else {
                    spa[4].innerHTML = "false"
                }
            }
        }
    </script>
</body>

</html>